<template>
	<view class="container">
		<block v-if="isload">
			<form @submit="formSubmit">
				<view class="mymoney" :style="{background:t('color1')}">
					<view class="f1">我的可提现{{t('佣金')}}</view>
					<view class="f2"><text style="font-size:26rpx">￥</text>{{userinfo.commission}}</view>
					<view class="f3" @tap="goto" data-url="commissionlog?st=1"><text>提现记录</text><text
							class="iconfont iconjiantou" style="font-size:20rpx"></text></view>
				</view>
				<view class="content2">
					<view class="item2">
						<view class="f1">提现金额(元)</view>
					</view>
					<view class="item3">
						<view class="f1">￥</view>
						<view class="f2"><input class="input" type="digit" name="money" value="" placeholder="请输入提现金额"
								placeholder-style="color:#999;font-size:40rpx" @input="moneyinput"></input></view>
					</view>
					<view class="item4" v-if="sysset.comwithdrawfee>0 || sysset.comwithdrawmin>0">
						<text v-if="sysset.comwithdrawmin>0" style="margin-right:10rpx">最低提现金额{{sysset.comwithdrawmin}}元
						</text>
						<text v-if="sysset.comwithdrawmax>0" style="margin-right:10rpx">单笔最高提现{{sysset.comwithdrawmax}}元
						</text>
						<text v-if="sysset.comwithdrawfee>0">提现手续费{{sysset.comwithdrawfee}}% </text>
					</view>
					<!-- 			<view class="item4">
				<text >审核成功后请在24小时内在提现记录中领取</text>
			</view> -->
					<view v-if="sysset.comwithdrawbl && sysset.comwithdrawbl!=100"
						style="width:94%;margin:0 3%;color:#8C8C8C;font-size:28rpx;margin-bottom:30rpx">
						提现金额的{{100-sysset.comwithdrawbl}}%将直接转到余额用于复购 </view>
				</view>
				<view class="withdrawtype">
					<view class="f1">选择提现方式：</view>
					<view class="f2" v-if="sysset.withdraw_aliaccount == 1 || sysset.withdraw_bankcard == 1 || sysset.withdraw_weixin == 1 ">
						<view class="item" v-if="sysset.withdraw_weixin==1" @tap.stop="changeradio" data-paytype="微信钱包">
							<view class="t1">
								<image class="img" src="/static/img/withdraw-weixin.png" />微信钱包
							</view>
							<view class="radio" :style="paytype=='微信钱包' ? 'background:'+t('color1')+';border:0' :''">
								<image class="radio-img" src="/static/img/checkd.png" />
							</view>
						</view>
						<label class="item" v-if="sysset.withdraw_aliaccount==1" @tap.stop="changeradio"
							data-paytype="支付宝">
							<view class="t1">
								<image class="img" src="/static/img/withdraw-alipay.png" />支付宝
							</view>
							<view class="radio" :style="paytype=='支付宝' ? 'background:'+t('color1')+';border:0' : ''">
								<image class="radio-img" src="/static/img/checkd.png" />
							</view>
						</label>
						<label class="item" v-if="sysset.withdraw_bankcard==1" @tap.stop="changeradio"
							data-paytype="银行卡">
							<view class="t1">
								<image class="img" src="/static/img/withdraw-cash.png" />银行卡
							</view>
							<view class="radio" :style="paytype=='银行卡' ? 'background:'+t('color1')+';border:0' : ''">
								<image class="radio-img" src="/static/img/checkd.png" />
							</view>
						</label>
					</view>
					<view class="f2" v-else>
						暂无提现方式
					</view>
				</view>
				<button  class="btn" v-if="sysset.withdraw_aliaccount == 1 || sysset.withdraw_bankcard == 1 || sysset.withdraw_weixin == 1 " :style="{background:t('color1')}" @tap="formSubmit">立即提现</button>
				
				 <!-- <button  class="btn" :style="{background:t('color1')}" @tap="formSubmit">立即提现</button> -->
				<view v-if="paytype=='支付宝'"
					style="width:100%;margin-top:40rpx;text-align:center;color:#999;display:flex;align-items:center;justify-content:center"
					@tap="goto" data-url="/pages/my/setaliaccount">设置支付宝账户
					<image src="/static/img/arrowright.png" style="width:30rpx;height:30rpx" />
				</view>
				<view v-if="paytype=='银行卡'"
					style="width:100%;margin-top:40rpx;text-align:center;color:#999;display:flex;align-items:center;justify-content:center"
					@tap="goto" data-url="/pages/my/setbankinfo">设置银行卡账户
					<image src="/static/img/arrowright.png" style="width:30rpx;height:30rpx" />
				</view>
			</form>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	var app = getApp();

	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,

				userinfo: [],
				money: 0,
				sysset: false,
				paytype: '微信钱包',
				tmplids: [],
				money_list: []
			};
		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			var that = this;
			this.getdata();
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		methods: {
			getdata: function() {
				var that = this;
				that.loading = true;
				app.get('Agent/commissionWithdraw', {}, function(res) {
					that.loading = false;
					uni.setNavigationBarTitle({
						title: that.t('佣金') + '提现'
					});
					var sysset = res.sysset;
					that.sysset = sysset;
					that.tmplids = res.tmplids;
					that.userinfo = res.userinfo;
					// var paytype = '微信';
					// if (sysset.withdraw_weixin == 1) {
					// 	paytype = '微信钱包';
					// }
					// if (!sysset.withdraw_weixin || sysset.withdraw_weixin == 0) {
					// 	paytype = '支付宝';
					// }
					// if ((!sysset.withdraw_weixin || sysset.withdraw_weixin == 0) && (!sysset
					// 		.withdraw_aliaccount || sysset.withdraw_aliaccount == 0)) {
					// 	paytype = '银行卡';
					// }
					 var paytype = '';
					that.paytype = paytype;
					that.loaded();
				});
			},

			moneyinput: function(e) {
				var usermoney = parseFloat(this.userinfo.commission);
				var money = parseFloat(e.detail.value);
				if (money < 0) {
					app.error('必须大于0');
				} else if (money > usermoney) {
					app.error('可提现' + this.t('佣金') + '不足');
				}
				this.money = money;
			},
			changeradio: function(e) {
				var that = this;
				var paytype = e.currentTarget.dataset.paytype;
				that.paytype = paytype;
			},
			getMoney() {
				app.get('Money/requestMerchantTransfer', {

				}, (res) => {
					this.money_list = res.data
					if (res.data.package_list.length > 0) {
						let package_info = res.data.package_list[0].package_info
						if (wx.canIUse('requestMerchantTransfer')) {
							wx.requestMerchantTransfer({
								mchId: this.money_list.mchId,
								appId: wx.getAccountInfoSync().miniProgram.appId,
								package: package_info,
								success: (res) => {
									// res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
									console.log('success:', res);
								},
								fail: (res) => {
									console.log('fail:', res);
								},
							});
						} else {
							wx.showModal({
								content: '你的微信版本过低，请更新至最新版本。',
								showCancel: false,
							});
						}
					}

				});
			},
			formSubmit: function() {
				var that = this;
				var usermoney = parseFloat(this.userinfo.commission);
				var withdrawmin = parseFloat(this.sysset.withdrawmin); //var formdata = e.detail.value;
				var comwithdrawmax = parseFloat(this.sysset.comwithdrawmax)
				var money = parseFloat(that.money);
				var paytype = this.paytype;

				if (isNaN(money) || money <= 0) {
					app.error('提现金额必须大于0');
					return;
				}
				if (withdrawmin > 0 && money < withdrawmin) {
					app.error('提现金额必须大于¥' + withdrawmin);
					return;
				}
				if (comwithdrawmax > 0 && money > comwithdrawmax) {
					app.error('提现金额必须小于¥' + comwithdrawmax);
					return;
				}
				if (money > usermoney) {
					app.error(that.t('佣金') + '不足');
					return;
				}
				if (paytype == '' && !this.userinfo.aliaccount) {
					app.alert('请选择提现方式', function() {
						
					});
					return;
				}
				if (paytype == '支付宝' && !this.userinfo.aliaccount) {
					app.alert('请先设置支付宝账号', function() {
						app.goto('/pages/my/setaliaccount');
					});
					return;
				}
				if (paytype == '银行卡' && (!this.userinfo.bankname || !this.userinfo.bankcarduser || !this.userinfo
						.bankcardnum)) {
					app.alert('请先设置完整银行卡信息', function() {
						app.goto('/pages/my/setbankinfo');
					});
					return;
				}
				app.showLoading('提交中');
				if (paytype == '微信钱包') {
					app.post('Agent/commissionwithdraw', {
						money: money,
						paytype: paytype
					}, function(data) {
						app.showLoading(false);
						if (data.status == 0) {
							app.error(data.msg);
							return;
						} else {
							that.getMoney()
							app.success(data.msg);

							that.subscribeMessage(function() {
								setTimeout(function() {
									app.goto('commissionlog?st=1');
								}, 1000);
							});
						}
					});
				} else {
					app.post('Agent/commissionwithdraw', {
						money: money,
						paytype: paytype
					}, function(data) {
						app.showLoading(false);
						if (data.status == 0) {
							app.error(data.msg);
							return;
						} else {

							app.success(data.msg);

							that.subscribeMessage(function() {
								setTimeout(function() {
									app.goto('commissionlog?st=1');
								}, 1000);
							});
						}
					});
				}

			}
		}
	};
</script>
<style>
	.container {
		display: flex;
		flex-direction: column
	}

	.mymoney {
		width: 94%;
		margin: 20rpx 3%;
		border-radius: 10rpx 56rpx 10rpx 10rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 70rpx 0
	}

	.mymoney .f1 {
		margin: 0 0 0 60rpx;
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
	}

	.mymoney .f2 {
		margin: 20rpx 0 0 60rpx;
		color: #fff;
		font-size: 64rpx;
		font-weight: bold
	}

	.mymoney .f3 {
		height: 56rpx;
		padding: 0 10rpx 0 20rpx;
		border-radius: 28rpx 0px 0px 28rpx;
		background: rgba(255, 255, 255, 0.2);
		font-size: 20rpx;
		font-weight: bold;
		color: #fff;
		display: flex;
		align-items: center;
		position: absolute;
		top: 94rpx;
		right: 0
	}

	.content2 {
		width: 94%;
		margin: 10rpx 3%;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		background: #fff
	}

	.content2 .item1 {
		display: flex;
		width: 100%;
		border-bottom: 1px solid #F0F0F0;
		padding: 0 30rpx
	}

	.content2 .item1 .f1 {
		flex: 1;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		height: 120rpx;
		line-height: 120rpx
	}

	.content2 .item1 .f2 {
		color: #FC4343;
		font-size: 44rpx;
		font-weight: bold;
		height: 120rpx;
		line-height: 120rpx
	}

	.content2 .item2 {
		display: flex;
		width: 100%;
		padding: 0 30rpx;
		padding-top: 10rpx
	}

	.content2 .item2 .f1 {
		height: 80rpx;
		line-height: 80rpx;
		color: #999999;
		font-size: 28rpx
	}

	.content2 .item3 {
		display: flex;
		width: 100%;
		padding: 0 30rpx;
		padding-bottom: 20rpx
	}

	.content2 .item3 .f1 {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 60rpx;
		color: #333333;
		font-weight: bold;
		margin-right: 20rpx
	}

	.content2 .item3 .f2 {
		display: flex;
		align-items: center;
		font-size: 60rpx;
		color: #333333;
		font-weight: bold
	}

	.content2 .item3 .f2 .input {
		font-size: 60rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.content2 .item4 {
		display: flex;
		justify-content: space-between;
		width: 94%;
		margin: 0 3%;
		border-top: 1px solid #F0F0F0;
		height: 100rpx;
		line-height: 100rpx;
		color: #8C8C8C;
		font-size: 28rpx
	}

	.withdrawtype {
		width: 94%;
		margin: 20rpx 3%;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		background: #fff
	}

	.withdrawtype .f1 {
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 30rpx;
		color: #333333;
		font-weight: bold
	}


	.withdrawtype .f2 {
		padding: 0 30rpx
	}

	.withdrawtype .f2 .item {
		border-bottom: 1px solid #f5f5f5;
		height: 100rpx;
		display: flex;
		align-items: center
	}

	.withdrawtype .f2 .item:last-child {
		border-bottom: 0
	}

	.withdrawtype .f2 .item .t1 {
		flex: 1;
		display: flex;
		align-items: center;
		color: #333
	}

	.withdrawtype .f2 .item .t1 .img {
		width: 44rpx;
		height: 44rpx;
		margin-right: 40rpx
	}

	.withdrawtype .f2 .item .radio {
		flex-shrink: 0;
		width: 36rpx;
		height: 36rpx;
		background: #FFFFFF;
		border: 3rpx solid #BFBFBF;
		border-radius: 50%;
		margin-right: 10rpx
	}

	.withdrawtype .f2 .item .radio .radio-img {
		width: 100%;
		height: 100%
	}

	.btn {
		height: 100rpx;
		line-height: 100rpx;
		width: 90%;
		margin: 0 auto;
		border-radius: 50rpx;
		margin-top: 30rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold
	}
</style>